<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="cname" name="cname" placeholder="请输入英雄名" /> &nbsp;&nbsp;&nbsp;
    <input type="text" id="skin_name" name="skin_name" placeholder="请输入皮肤名" />
    <button>点击添加数据</button>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $('button').click(function () {
                const cname = $('#cname').val();
                const skin_name = $('#skin_name').val();

                // 判断数据库此英雄是否存在，假如存在则不添加
                const url = "http://127.0.0.1:3001/getHeroSkin";
                $.get(url, {
                    heroName: cname
                }, function (res) {
                    // console.log(skin_name)
                    // console.log(res.data.skin_name == skin_name)
                    if (res.data.cname == cname && res.data.skin_name == skin_name) {
                        // 数据库中此项数据已经存在
                        alert(`${skin_name},此项皮肤已存在`);
                        return false;
                    } else {
                        // 否则添加数据
                        const posturl = 'http://127.0.0.1:3001/addHeroSkin';
                        $.post(posturl, {
                            cname,
                            skin_name
                        }, res => {
                            console.log(res);
                        });
                    }
                })
            })
        })
    </script>
</body>

</html>